Koa2初体验(二)

发表于 | 分类于 | 本文总阅读量 次
字数统计: 595 | 阅读时长 ≈ 3

Koa2 路由

Koa2 原生路由的实现

路由在web中的作用不言而喻，而要先实现原生路由，需要的到地址栏输入的路径，然后再根据路径不同进行跳转。而在Koa2中，我们可以用 ctx.requerst.url 来实现获取访问路径：

1
2
3
4
5
6
7
8
9
10
11
const Koa = require('koa')
const app = new Koa()

app.use(async(ctx) => {
    const url = ctx.request.url
    ctx.body = url 
})

app.listen(3000, () => {
    console.log('demo3 is run')
})

加入我们的文件结构是这样的：

├── demo3.js
├── package.json
└── view
    ├── register.html
    ├── index.html
    └── login.html

我们就可以这样来实现原生路由：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
const Koa = require('koa')
const fs = require('fs')
const app = new Koa()

function render(page) {
    return new Promise((resolve, reject) => {
        let viewUrl = `./view/${page}`
        fs.readFile(viewUrl, "binary", (err, data) => {
            console.log(1)
            if (err) {
                reject(err)
            } else {
                resolve(data)
            }
        })
    })
}
async function route(url) {
    let view = '404.html'
    switch(url) {
        case '/':
            view = 'index.html'
            break
        case '/login':
            view = 'login.html'
            break
        case '/register':
            view = 'register.html'
            break
        case '/index':
            view = 'index.html'
            break
        default:
            break
    }
    let html = await render(view)
    return html
}

app.use(async(ctx) => {
    const url = ctx.request.url
    let html = await route(url)
    ctx.body = html
})

app.listen(3000, () => {
    console.log('demo3 is run')
})

通过上面的代码，我们成功实现了一个路由切换的功能，但这样写无疑是不够优雅的，且也只是在原理上的实现，不足以应付我们日常开发中所遇到的种种问题。因此我们和上次一样，还是需要引入中间件来达成我们的目标。

koa-router

首先我们需要下载 koa-router 中间件：

1
cnpm i koa-router --save

然后我们就能通过koa-router来优雅的进行路由调换了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const Koa = require('koa')
const fs = require('fs')
const app = new Koa()
const Router = require('koa-router')
let home = new Router()

home.get('/', async ( ctx ) => {
    let html = `
        <ul>
            <li><a href="/page/helloworld">/page/helloworld</a></li>
            <li><a href="/page/404">/page/404</a></li>
        </ul>
    `
    ctx.body = html
})
// 子路由2
let page = new Router()
page.get('/404', async ( ctx )=>{
    ctx.body = '404 page!'
}).get('/helloworld', async ( ctx )=>{
ctx.body = 'helloworld page!'
})
// 装载所有子路由
let router = new Router()
router.use('/', home.routes(), home.allowedMethods())
router.use('/page', page.routes(), page.allowedMethods())
// 加载路由中间件
app.use(router.routes()).use(router.allowedMethods())
app.listen(3000)
console.log('demo4 is run')